import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:x_common_utils/utils/inkWell_util.dart';
import 'package:xinxuan/common/appbar_util.dart';
import 'package:xinxuan/common/button_util.dart';
import 'package:get/get.dart';
import 'package:xinxuan/common/network_image_util.dart';
import 'package:xinxuan/common/replacement_agreement.dart';
import 'package:xinxuan/common/scroll_configuration_common.dart';
import 'package:xinxuan/common/seckill_order_detail_goods_arr.dart';
import 'package:xinxuan/controllers/my_commodity_controller/replacement_shelf_page_controller.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:xinxuan/utils/color_util.dart';
import 'package:xinxuan/vo/common_vo/common_seckill_detail_data_vo.dart';
import 'package:xinxuan/vo/common_vo/common_seckill_order_products_item_vo.dart';
import 'package:xinxuan/vo/seckill_order_detail_vo.dart';

class ReplacementShelfPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return GetBuilder<ReplacementShelfPageController>(
      init: ReplacementShelfPageController(),
      builder: (controller) {
        return Scaffold(
          backgroundColor: pageBgColor,
          appBar: AppBarUtil(title: '置换上架'),
          body: ScrollConfigurationCommon(child: ListView(
            padding: EdgeInsets.zero,
            children: [
              SizedBox(height: 12.h),
              SeckillOrderDetailGoodsArr(seckillOrderDetailData: SeckillOrderDetailData(
                products: [
                  CommonSeckillOrderProductsItemVo(
                    image: controller.seckillHolderProductsData.value.image,
                    price: controller.seckillHolderProductsData.value.price,
                    title: controller.seckillHolderProductsData.value.title
                  )
                ]
              )),
              Container(
                alignment: Alignment.center,
                height: 55.h,
                child: Image.asset(
                  'assets/icons/icon_substitution.png',
                  width: 233.w,
                  height: 23.h,
                  fit: BoxFit.cover,
                ),
              ),
              _goodsArr(controller),
              Container(
                height: 76.h,
                alignment: Alignment.center,
                padding: EdgeInsets.symmetric(horizontal: 25.w),
                child: InkWellUtil.shakeProofInkWell(Container(
                  height: 36.h,
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: bgMainColor,
                      width: 1.w
                    ),
                    borderRadius: BorderRadius.circular(36.h)
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        '换一批',
                        style: TextStyle(
                          color: mainTextColor,
                          fontSize: 16.sp,
                        ),
                      ),
                      SizedBox(width: 6.w),
                      Image.asset(
                        'assets/icons/icon_change.png',
                        width: 12.w,
                        height: 12.w,
                      )
                    ],
                  ),
                ), () {
                  controller.getDisplacementList(controller.thisProductId);
                },
                hoverColor: Colors.transparent,
                splashColor: Colors.transparent,
                highlightColor: Colors.transparent)
              ),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 8.w),
                decoration: BoxDecoration(
                  color: bgWhiteColor,
                  borderRadius: BorderRadius.circular(5.w)
                ),
                child: Column(
                  children: [
                    Container(
                      width: 375.w,
                      decoration: BoxDecoration(
                        border: Border(
                          bottom: BorderSide(
                            width: .5,
                            color: lineColor
                          )
                        )
                      ),
                      child: Container(
                        padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 12.h),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              '委托价格',
                              style: TextStyle(
                                color: textBlackColor,
                                fontSize: 16.sp,
                                fontWeight: FontWeight.bold
                              ),
                            ),
                            SizedBox(height: 6.h),
                            Text.rich(
                              TextSpan(
                                text: '商品转让价格选择：',
                                style: TextStyle(
                                  color: textSubtitleColor,
                                  fontSize: 14.sp
                                ),
                                children: [
                                  TextSpan(
                                    text: '¥ ${controller.productPriceStr.value}',
                                    style: TextStyle(
                                      color: mainTextColor,
                                      fontSize: 14.sp
                                    ),
                                  )
                                ]
                              )
                            )
                          ],
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 17.w, vertical: 12.h),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Opacity(
                            opacity: .3,
                            child: ButtonUtil(
                              text: '8折价格转让', 
                              fontSize: 12.sp, 
                              textColor: textBlackColor,
                              borderRadius: 5.w, 
                              height: 30.h, 
                              padding: 9.w,
                              bgColors: [
                                bgDisplayColor,
                                bgDisplayColor
                              ],
                              onTop: () {}
                            ),
                          ),
                          Opacity(
                            opacity: .3,
                            child: ButtonUtil(
                              text: '原价格转让', 
                              fontSize: 12.sp, 
                              textColor: textBlackColor,
                              borderRadius: 5.w, 
                              height: 30.h, 
                              padding: 9.w,
                              bgColors: [
                                bgDisplayColor,
                                bgDisplayColor
                              ],
                              onTop: () {}
                            ), 
                          ),
                          ButtonUtil(
                            text: '增值原价转让', 
                            fontSize: 12.sp, 
                            borderRadius: 5.w, 
                            height: 30.h, 
                            padding: 9.w,
                            bgColors: [
                              bgMainColor,
                              bgMainColor
                            ],
                            onTop: () {}
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
              SizedBox(height: 25.h)
            ],
          )),
          bottomNavigationBar: BottomAppBar(
            elevation: 0,
            child: Obx(() => Container(
              height: controller.seckillHolderProductsData.value.gift!.quantity! <= 0 ? 94.h : 130.h,
              child: Column(
                children: [
                  controller.seckillHolderProductsData.value.gift!.quantity! <= 0 ? Container() : Container(
                    height: 36.h,
                    padding: EdgeInsets.symmetric(horizontal: 12.w),
                    decoration: BoxDecoration(
                      border: Border(
                        bottom: BorderSide(
                          width: .5,
                          color: lineColor
                        )
                      )
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/icons/icon_gift.png',
                          width: 20.w,
                          height: 20.w,
                        ),
                        SizedBox(width: 12.w),
                        Text(
                          '${controller.seckillHolderProductsData.value.gift!.title} X${controller.seckillHolderProductsData.value.gift!.quantity}',
                          style: TextStyle(
                            color: textBlackColor,
                            fontSize: 12.sp
                          ),
                        )
                      ],
                    ),
                  ),
                  ReplacementAgreement(
                    consentAgreement: controller.consentAgreement.value, 
                    onTap: () {
                      controller.consentAgreement.value = !controller.consentAgreement.value;
                    }
                  ),
                  Container(
                    height: 56.h,
                    padding: EdgeInsets.symmetric(horizontal: 12.w),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text.rich(
                              TextSpan(
                                text: '补差价：',
                                style: TextStyle(
                                  color: textBlackColor,
                                  fontSize: 14.sp
                                ),
                                children: [
                                  TextSpan(
                                    text: '¥',
                                    style: TextStyle(
                                      color: mainTextColor,
                                      fontSize: 18.sp,
                                      fontWeight: FontWeight.bold
                                    )
                                  ),
                                  TextSpan(
                                    text: '${controller.priceDifference.value}',
                                    style: TextStyle(
                                      color: mainTextColor,
                                      fontSize: 22.sp,
                                      fontWeight: FontWeight.bold
                                    )
                                  )
                                ]
                              ),
                            ),
                            Text(
                              '置换增值商品上架需补商品差价',
                              style: TextStyle(
                                color: textBlackColor,
                                fontSize: 12.sp
                              ),
                            )
                          ],
                        ),
                        Container(
                          width: 120.w,
                          child: ButtonUtil(
                            text: '确认委托', 
                            fontSize: 14.sp, 
                            borderRadius: 18.w, 
                            height: 36.h, 
                            onTop: () {
                              controller.onfirmEntrust(controller.thisHolderId);
                            }
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
            )),
          ),
        );
      },
    );
  }

  /// 可置换的商品类表
  Widget _goodsArr(ReplacementShelfPageController controller) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      child: StaggeredGridView.countBuilder(
        padding: EdgeInsets.zero,
        physics: NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        crossAxisCount: 4,
        itemCount: controller.goodsArr.length,
        staggeredTileBuilder: (int index) => StaggeredTile.fit(2),
        mainAxisSpacing: 12.h,
        crossAxisSpacing: 13.w,
        itemBuilder: (BuildContext context, int index) {
          CommonSeckillDetailDataVo item = controller.goodsArr[index];
          return Container(
            width: 165.w,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5.w),
              color: bgWhiteColor
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                NetworkImageUtil(
                  url: item.image ?? '', 
                  width: 165.w, 
                  height: 165.w,
                  topLeftRadius: 5.w,
                  topRightRadius: 5.w,
                ),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 12.h),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '${item.title}',
                        overflow: TextOverflow.ellipsis,
                        maxLines: 2,
                        style: TextStyle(
                          color: textBlackColor,
                          fontSize: 14.sp,
                          fontWeight: FontWeight.bold
                        ),
                      ),
                      SizedBox(height: 6.h),
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 4.w),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text.rich(
                              TextSpan(
                                text: '商品价格:  ',
                                style: TextStyle(
                                  color: textSubtitleColor,
                                  fontSize: 12.sp,
                                  decoration: TextDecoration.lineThrough,
                                  fontWeight: FontWeight.bold
                                ),
                                children: [
                                  TextSpan(
                                    text: '¥',
                                    style: TextStyle(
                                      color: textSubtitleColor,
                                      fontSize: 12.sp,
                                      fontWeight: FontWeight.bold
                                    ),
                                  ),
                                  TextSpan(
                                    text: '${item.shoppingPrice}',
                                    style: TextStyle(
                                      color: textSubtitleColor,
                                      fontSize: 16.sp,
                                      fontWeight: FontWeight.bold
                                    ),
                                  )
                                ]
                              )
                            ),
                            Text.rich(
                              TextSpan(
                                text: '抢购价格:  ',
                                style: TextStyle(
                                  color: mainTextColor,
                                  fontSize: 12.sp,
                                  fontWeight: FontWeight.bold
                                ),
                                children: [
                                  TextSpan(
                                    text: '¥',
                                    style: TextStyle(
                                      color: mainTextColor,
                                      fontSize: 12.sp,
                                      fontWeight: FontWeight.bold
                                    ),
                                  ),
                                  TextSpan(
                                    text: '${item.price}',
                                    style: TextStyle(
                                      color: mainTextColor,
                                      fontSize: 16.sp,
                                      fontWeight: FontWeight.bold
                                    ),
                                  )
                                ]
                              )
                            )
                          ],
                        ),
                      ),
                      SizedBox(height: 12.h),
                      controller.productId.value == item.id ? ButtonUtil(
                        text: '已选择', 
                        fontSize: 14.sp, 
                        borderRadius: 20.w, 
                        height: 30.h, 
                        bgColors: [
                          bgSelectBtn1,
                          bgSelectBtn2,
                        ],
                        onTop: () {}
                      ) : ButtonUtil(
                        text: '选择置换', 
                        fontSize: 14.sp, 
                        borderRadius: 20.w, 
                        height: 30.h, 
                        onTop: () {
                          controller.calculationPriceDifference(controller.thisProductId, item.id!, item.price ?? '0.00');
                        }
                      )
                    ],
                  ),
                )
              ],
            ),
          );
        }
      ),
    );
  }
}